<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>jSquares - An image collage like the ted.com homepage</title>
	
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">google.load("jquery","1.3.2");</script>
	
	<!-- styles -->
	<link rel="stylesheet" href="css/jsquares.css" type="text/css" media="all" />

	
	<!-- js -->
	<script src="js/jquery.jsquares.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			$('#js-container').jsquares();
			$('#js-container-2').jsquares({
				js_shuffle_in: false, // have the pictures all fade in on page load?
				js_fade_on_hover: false, // do we want the images to fade on hover or just change opacity?
				js_caption_slide_down: false // do we want the caption to slide down or just appear?
			});
			
		});
	</script>
	 
</head>

<body>
	
		
		<h2>Example 1 (default)</h2>
		<pre>$('#js-container').jsquares();</pre>

	<div id="js-container">
	
				
			<div class="js-image size-3" style="top:0px;left:0px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:0px;left:224px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:78px;left:224px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-3" style="top:0px;left:336px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:0px;left:560px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:78px;left:560px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:156px;left:0px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-3" style="top:156px;left:112px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:156px;left:336px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:156px;left:448px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:195px;left:448px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:156px;left:504px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:156px;left:616px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:234px;left:56px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">

					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>

				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:234px;left:336px;">		
				<a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
				<div class="js-small-caption">
					<span>Howlla at cha boy!</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>You can't hide from wolf boy.</h4>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
		
	</div>
	
	
	
	<h2>Example 2</h2>

	<pre>
$('#js-container-2').jsquares({
	js_shuffle_in: false, // have the pictures all fade in on page load?
	js_fade_on_hover: false, // do we want the images to fade on hover or just change opacity?
	js_caption_slide_down: false // do we want the caption to slide down or just appear?
});</pre>
	<div id="js-container-2">
	
				
			<div class="js-image size-3" style="top:0px;left:0px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:0px;left:224px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:78px;left:224px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-3" style="top:0px;left:336px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:0px;left:560px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:78px;left:560px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:156px;left:0px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-3" style="top:156px;left:112px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:156px;left:336px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:156px;left:448px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:195px;left:448px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-2" style="top:156px;left:504px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:156px;left:616px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:234px;left:56px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>

				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">
					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>

					</p>
				</div>
			</div>
		
				
			<div class="js-image size-1" style="top:234px;left:336px;">		
				<img class="js-small-image" src="images/sesame-street.jpg"/>
				<div class="js-small-caption">
					<span>Everyone loves this show</span>
				</div>
				<div class="js-overlay-caption-content">

					<h4>Sesame Street!</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
					</p>
				</div>
			</div>
		
		
	</div>

	
	
	
</body>
</html>